<template>
  <div>
    <div class="con">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>商品轮播图</span>
        </div>
        <div>
          <el-image
            v-for="(item, index) in goodsInfo.productBannerImgs"
            :key="index"
            style="width: 100px; height: 100px; margin-right: 5px"
            :src="item.bannerImgPath"
            :preview-src-list="[item.bannerImgPath]"
            fit="fit"
          ></el-image>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <div>
          <el-descriptions title="">
            <el-descriptions-item :span="2" label="商品名称">{{
              goodsInfo.productDetails.productName
            }}</el-descriptions-item>
            <el-descriptions-item :span="2" label="商品积分数">
              <div>
                {{ goodsInfo.productDetails.productIntegral }}
              </div>
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="商品售价">{{
              goodsInfo.productDetails.productShopPrice
            }}</el-descriptions-item>
            <el-descriptions-item :span="2" label="市场价格">
              {{ goodsInfo.productDetails.marketPrice }}
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="供货价">{{
              goodsInfo.productDetails.costPrice
            }}</el-descriptions-item>
            <el-descriptions-item :span="2" label="库存数">{{
              goodsInfo.productDetails.localStockNum
            }}</el-descriptions-item>
            <el-descriptions-item :span="2" label="品牌">
              <el-tag type="success">{{
                goodsInfo.productDetails.goodsBrand
              }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="产品编号">
              {{ goodsInfo.productDetails.productSerialNumber }}
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="慧采码">
              {{ goodsInfo.productDetails.huicaiCode }}
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="最小起订量">
              {{ goodsInfo.productDetails.minimumOrderQuantity }}
            </el-descriptions-item>

            <el-descriptions-item :span="2" label="分类">{{
              goodsInfo.productDetails.oneCategory +
              "/" +
              goodsInfo.productDetails.twoCategory +
              "/" +
              goodsInfo.productDetails.threeCategory
            }}</el-descriptions-item>
            <el-descriptions-item :span="2" label="商品供应商">
              <el-tag type="" effect="dark">
                {{ goodsInfo.productDetails.goodsSupplier }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="是否返现">
              <el-tag
                type="success"
                v-if="goodsInfo.productDetails.isCashBank == 1"
                >是</el-tag
              >
              <el-tag
                type="danger"
                v-if="goodsInfo.productDetails.isCashBank == 0"
                >否</el-tag
              >
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="返现金额">
              {{ goodsInfo.productDetails.cashBankPrice }}
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="返佣比例">
              {{ goodsInfo.productDetails.bankRatio }}%
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="是否上架">
              <el-tag
                type="success"
                v-if="goodsInfo.productDetails.isShelf == 1"
                >是</el-tag
              >
              <el-tag type="danger" v-if="goodsInfo.productDetails.isShelf == 0"
                >是否</el-tag
              >
            </el-descriptions-item>

            <el-descriptions-item :span="2" label="商品分组">{{
              goodsInfo.productDetails.goodsGroup
            }}</el-descriptions-item>
            <el-descriptions-item :span="2" label="商品类型">
              <span v-if="goodsInfo.productDetails.isJdGoods == 1"
                >普通商品</span
              >
              <span v-if="goodsInfo.productDetails.isJdGoods == 2"
                >京东商品</span
              >
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="商品码">
              <el-image
                :src="goodsInfo.productDetails.productShowQrCode"
              ></el-image>
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="商品标签">
              <el-tag
                v-for="(item, index) in goodsInfo.productDetails.productTags"
                :key="index"
                style="margin-right: 4px"
                >{{ item }}</el-tag
              >
            </el-descriptions-item>
            <el-descriptions-item :span="12" label="商品简介">
              <span
                v-html="goodsInfo.productDetails.productBriefIntroduction"
              ></span>
            </el-descriptions-item>

            <el-descriptions-item :span="12" label="商品详情">
              <div
                class="goodsDetail"
                v-html="goodsInfo.productDetails.details"
              ></div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { getMallProductBackDetail } from "@/api/system/mall.js";
export default {
  data() {
    return {
      goodsInfo: {
        productDetails: {},
        productBannerImgs: [],
      },
    };
  },
  created() {
    this.getGoodsDetail();
  },
  methods: {
    /**获取商品详情 */
    getGoodsDetail() {
      const mallProductId = this.$route.query.id;
      getMallProductBackDetail({ mallProductId }).then((res) => {
        this.goodsInfo = res.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.con {
  padding: 20px;
}
.box-card {
  margin-bottom: 20px;
}
.goodsDetail {
  img {
    display: block;
  }
}
</style>
